<template>
    <div class="role-list-container">
      <!--工具栏-->
      <el-card>
        <el-row :gutter="10" class="mb-4">
          <el-col :span="1.5">
            <el-button type="primary" @click="handleopen">批量启用</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" @click="handleclose">批量禁用</el-button>
          </el-col>
        </el-row>
        <!-- 表格 -->
      <el-table
        :data="permissions"
        border
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="permId" label="权限编号" align="center"></el-table-column>
        <el-table-column prop="permPid" label="父菜单编号" align="center"></el-table-column>
        <el-table-column label="菜单类型">
            <template #default="{ row }">
               <el-tag v-if="row.permPid === null" type="success">菜单</el-tag>
               <el-tag v-if="row.permPid === 1" type="success">列表</el-tag>
               <el-tag v-if="row.permPid === 2" type="info">按钮</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="permTitle" label="菜单名称" align="center"></el-table-column>
        <el-table-column prop="permName" label="路由名称" align="center"></el-table-column>
        <el-table-column prop="permExpression" label="权限表达式" align="center"></el-table-column>
        <el-table-column prop="permComponent" label="菜单组件" align="center"></el-table-column>
        <el-table-column label="状态">
            <template #default="{ row }">
               <el-tag v-if="row.permStatus === 1" type="success">启用</el-tag>
               <el-tag v-if="row.permStatus === 0" type="danger">禁用</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="240" align="center">
          <template #default="{ row }">
            <el-button size="small" @click="open(row.permId)" v-if="!row.permStatus">启用</el-button>
            <el-button size="small" type="danger" @click="close(row.permId)" v-if="row.permStatus">禁用</el-button>
          </template>
        </el-table-column>
      </el-table>
     </el-card>
    </div>
</template>
<script setup>
import axios from 'axios';
import { onMounted,ref,reactive } from 'vue';
import { ElMessage, ElMessageBox, ElTree } from 'element-plus';
// 显示全部权限信息
import { getPerm,getPermById,getPermStatus } from '../../api/permission'

const permissions = ref([])
onMounted(()=>{

    loadPermission()

})
// 获取权限信息
const loadPermission = async ()=>{
  let response = await getPerm()
  permissions.value = response.data
}


// 启用权限
const open = async(permId)=>{
    let response = await getPermStatus(permId,1)
    permissions.value = response.data
    loadPermission()
  }

// 禁用权限
const close = async(permId)=>{
    let response = await getPermStatus(permId,0)
    permissions.value = response.data
    /*
    if(response.data.permPid == null){
        close()
    }else{

    }*/
    loadPermission()
  }
</script>





<style scoped>
.assign-permission-content {
  padding: 20px;
}

.drawer-footer {
  margin-top: 20px;
  text-align: right;
}
.mb-4 {
  margin-bottom: 1rem;
}
</style>